<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <!-- 定义一个输入框，监听用户输入的内容 -->
    <input type="text" v-model="searchText"/>
  </div>

<script>
  /* watch用来定义监听 */
  const {createApp,ref,watch} = Vue

  // 定义组件
  const config = {
    setup() {
      // 数据
      const searchText = ref('')
      /*
        监听器监听属性的变化
          使用watch时需要传入两个参数
            第一个参数是要监听的属性，可以直接对ref属性进行监听
            第二个参数是一个回调函数 ，这个回调函数会在属性的值发生变化时调用，会把属性变化前后的值作为参数传入
      */
      watch(searchText, (newValue, oldValue) => {
        console.log('newValue:', newValue)
        console.log('oldValue:', oldValue)
        if (newValue.length > 10) {
          alert('输入的内容不能超过5个字符')
          searchText.value = oldValue
        }
      })
      return {searchText}
    }
  }
  app = createApp(config)
  app.mount('#app')


</script>
</body>
</html>